Essential Angular for ASP.NET Core MVC by Adam Freeman

Essential Angular for ASP.NET Core MVC by Adam Freeman

Author:Adam Freeman
Language: rus
Format: azw3, epub
Published: 2017-07-22T15:25:44+00:00


Chapter 7 ■ StruCturing an angular appliCation

The import statement provides access to the ProductDetailComponent class, which is added to the NgModule decorator’s declarations property. Now that the component can be used, edit the root component’s template to add the element that will apply the new component, as shown in Listing 7-12.

Listing 7-12. Adding an Element in the app.component.html File in the ClientApp Folder

<div class="container">

<div class="row">

<div class="col">

<category-filter></category-filter>

<product-table></product-table>

</div>

<div class="col">

<product-detail></product-detail>

</div>

</div>

</div>

The listing also adds some structure to the HTML document, using Bootstrap CSS classes to position the new component side-by-side with the existing ones.

Selecting a Product

The new component will display the details of a single product when it is selected, which means that the next step is to provide the user with the means to make that selection. First, add the elements shown in Listing 7-13 to the template for the product table.

Listing 7-13. New Elements in the productTable.component.html File in the ClientApp/app/structure Folder

<table class="table table-striped">

<tr><th>Name</th><th>Category</th><th>Price</th><th></th></tr>

<tr *ngFor="let product of products">

<td>{{product.name}}</td>

<td>{{product.category}}</td>

<td>{{product.price}}</td>

<td>

<button class="btn btn-primary btn-sm"

(click)="selectProduct(product.productId)">

Details

</button>

</td>

</tr>

</table>

The new elements add a column to the table containing a Details button for each row produced by the ngFor directive. The click event binding will invoke a method called selectProduct when the button is clicked, providing the ID value of the corresponding product. To define the method that the event binding invokes, add the code shown in Listing 7-14 to the product table component.

145



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.